.sidebar_cont {
    white-space: nowrap;
    position: fixed;
    left: 0px;
    top: 5px;
    z-index: 99;
    width: 60px;
    display: flex;
    flex-flow: column;
    align-items: center;
    height: 100%;
}

.sidebar {
  .tm {
    background: url(./assets/board/mars.png);
    width: 50px;
    height: 50px;
    margin-top: 3px;
    border-radius: 50%;
    box-shadow: 0 1px 1px 1px black;
    font-family: Prototype;
    text-align: center;
    line-height: 20px;
    color: black;
    background-size: 100px;
    background-position: -26px -20px;
  }
  .gen-text {
    font-size: 14px;
    margin-top: 2px;
  }
  .gen-marker {
    font-size: 34px;
  }

  .global_params {
    width: 60px;
    margin-bottom: 5px;
  }

  .temperature-tile {
    background-image: url(./assets/global-parameters/temperature.png);
    width: 16px;
    height: 46px;
    background-size: 16px 46px;
    margin-left: 22px;
    margin-top: 10px;
  }

  .oxygen-tile {
    background-image: url(./assets/global-parameters/oxygen.png);
    width: 40px;
    height: 40px;
    background-size: 40px;
    margin-left: 10px;
    margin-top: 10px;
  }

  .ocean-tile {
    background-image: url(./assets/tiles/ocean.png);
    width: 32px;
    height: 36px;
    background-size: 32px 36px;
    margin-left: 14px;
    margin-top: 10px;
  }

  .venus-tile {
    background-image: url(./assets/global-parameters/venus.png);
    width: 40px;
    height: 26px;
    background-size: 40px 26px;
    margin-left: 10px;
    margin-top: 10px;
  }

  .global_params_value {
    text-align: center;
    font-family: "Prototype";
    margin-top: -5px;
  }

  .checkmark{
    display: inline-block;
    filter: invert(92%) sepia(11%) saturate(1093%) hue-rotate(46deg) brightness(98%) contrast(85%);
    width: 18px;
    height: 18px;
  }

  .moon-tile {
    background-image: url(./assets/tags/moon.png);
    width: 32px;
    height: 36px;
    background-size: 32px 36px;
    margin-left: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .moon_params_value {
    text-align: center;
    font-family: "Prototype";
    font-size: 15px;
    .habitat {
      background-color: #0e7a99;
      padding: 2px;
      border-radius: 2px;
    }
    .logistics {
      background-color: rgb(192, 192, 192);
      color: black;
      padding: 2px;
      border-radius: 2px;
    }
    .mining {
      background-color: #915d26;
      padding: 2px;
      border-radius: 2px;
    }
  }
}

.preferences_acting_player {
    background: linear-gradient(180deg, #303030 0%, #303030 25%, #745B54 80%, #745B54 100%);
}
.preferences_nonacting_player {
    background: #303030;
}
.preferences-divider {
    background: rgba(170, 170, 170, 0.3);
    height: 2px;
    width: 80%;
    margin-bottom: 8px;
}
.sidebar_item {
    width: 46px;
    background: black;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 8px;
}
.sidebar_item_shortcut {
    height: 60px;
}
.sidebar_item_shortcut-long {
    height: 74px;
}

.sidebar_item--language {
    position: absolute;
    bottom: 162px;
    height: 46px;
}

.sidebar_item--info {
    position: absolute;
    bottom: 111px;
    left: 0px;
    margin-left: 7px;
    height: 46px
}

.sidebar_item--help {
    position: absolute;
    bottom: 60px;
    left: 0px;
    margin-left: 7px;
    height: 46px
}

.sidebar_item--settings {
    position: absolute;
    bottom: 10px;
    height: 46px;
}


.preferences_player {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.preferences_player_inner {
    width: 26px;
    height: 26px;
    border-radius: 3px;
    &.active {
        -webkit-animation: rotation 8s infinite linear;
        animation: rotation 8s infinite linear;
        box-shadow: 0 0 5px 2px #fff;
    }
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}

.sidebar_icon {
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: inline-block;
}

.sidebar_icon.sidebar_icon--actions {
    margin-top: 7px;
    background-image: url(./assets/sidebar/preferences_actions.png);
}

.sidebar_icon.sidebar_icon--cards {
    background-image: url(./assets/sidebar/preferences_cards.png);
}

.sidebar_icon.sidebar_icon--board {
    margin-top: 7px;
    background-image: url(./assets/sidebar/preferences_board.png);
}

.sidebar_icon.sidebar_icon--language {
  font-size: 15px;
}

.sidebar_icon.sidebar_icon--info {
    background-image: url(./assets/sidebar/preferences_info.png);
    background-size: 36px 36px;
}

.sidebar_icon.sidebar_icon--help {
    background-image: url(./assets/sidebar/preferences_help.png);
    background-size: 36px 36px;
}

.sidebar_icon.sidebar_icon--settings {
    background-image: url(./assets/sidebar/preferences_settings.png);
}

.sidebar_icon.sidebar_icon--colonies {
    background-image: url(./assets/sidebar/preferences_colony.png);
    background-size: 25px;
    width: 25px;
    height: 46px;
    margin-left: 5px;
}

.preferences_panel_actions {
    text-align: center;
}

.preferences_panel {
    padding: 15px 15px 15px 20px;
    display: inline-block;
    position: absolute;
    bottom: 0px;
    left: 53px;
    color: #c6c6c6;
    background: #000000;
    max-height: calc(85vh);
    overflow-y: auto;
    white-space: nowrap;
}

.sidebar_item--is-active::after {
    content: " ";
    width: 10px;
    height: 46px;
    position: absolute;
    background: #000;
    margin: -5px 0 0 38px;
}

.preferences_panel .tooltip::after {
    right: auto;
    white-space: normal;
}

/* Visual effects of changing settings */

/* Reduce all cards size */
.preferences_small_cards .filterDiv,
.preferences_small_cards .filterDiv:hover {
    transform: scale(0.8);
    margin: -22px -15px -15px -15px;
}
.preferences_small_cards .filterDiv.card-standard-project,
.preferences_small_cards .filterDiv:hover.card-standard-project {
    margin: -0px -10px -15px -10px;
}

/*Selection check box room for smaller cards */
.preferences_small_cards input[type="checkbox"] + .filterDiv.card-container,
.preferences_small_cards input[type="radio"] + .filterDiv.card-container{
    margin-top: -8px;
}

.preferences_small_cards input[type="checkbox"] + .filterDiv.card-standard-project,
.preferences_small_cards input[type="radio"] + .filterDiv.card-standard-project{
    margin-top: 0px;
}

.preferences_small_cards input[type="checkbox"]:checked + .filterDiv,
.preferences_small_cards input[type="radio"]:checked + .filterDiv {
    transform: scale(0.8);
}

/* Hide blocks */
.preferences_hide_awards_and_milestones .player_home_block--milestones-and-awards {
    display: none;
}

.preferences_panel_langs {
    margin-left: 38px;
}

/* Remove background */
.preferences_remove_background #player-home {
    background: #222;
}

.preferences_remove_background #spectator-home {
    background: #222;
}

/* Card Magnification */
.preferences_magnify_cards {
    .filterDiv {
        transition: transform 0.15s;
    }
    .filterDiv:hover {
        transform: scale(1.2);
        z-index: 100;
    }

    .dragging .filterDiv:hover {
        transform: none;
    }

    .cards-stack:hover,
    .cards-stack-first:hover {
        z-index: 2;
        transform: scale(1);
    }

    .global-event:hover {
        transform: scale(1.2);
        z-index: 2;
    }
}
/* Magnify the wee little cards in a special way, if requested */
.preferences_small_cards.preferences_magnify_cards .filterDiv:hover {
    transform: scale(0.95);
}

.info_panel-spacing{
    padding-bottom: 40px;
}

.info-panel-title{
    font-size: 25px;
    font-style: normal;
    font-family: Arial;
    font-weight: bold;
    text-align: left;
    padding-bottom: 15px;
}

.info_panel {
    padding: 15px 15px 15px 20px;
    display: inline-block;
    position: absolute;
    bottom: 0px;
    left: 53px;
    color: #c6c6c6;
    background: #000000;
    max-height: calc(85vh);
    overflow-y: auto;
}

.info_panel_actions {
    text-align: center;
}

.free-floating-preferences-icon {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 16px;
}

.bug-dialog {
  .center {
    text-align: center;
  }
  .invisible {
    visibility: hidden;
  }
  a {
    color: blue,
  }
}
